<template>
  <div>
    <h1>数学练习</h1>
    <div class="questions" v-if="!isSubmitted">
      <div v-for="(question, index) in questions" :key="index" class="question">
        <span>第{{ index + 1 }}题：</span>
        <span class="question-text">{{ question.text }}</span>
        <input
          v-model="userAnswers[index]"
          type="number"
          placeholder="请输入答案"
        />
      </div>
      <button @click="submitAnswers" class="submit-btn">提交答案</button>
    </div>
    <div v-else>
      <p>总题目数量：10</p>
      <p>正确答案数量：{{ correctCount }}</p>
      <p>正确率：{{ accuracy }}%</p>
      <p>{{ encouragement }}</p>
      <table class="results-table">
        <thead>
          <tr>
            <th>题目</th>
            <th>你的答案</th>
            <th>正确答案</th>
            <th>结果</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(question, index) in questions" :key="index">
            <td>{{ question.text }}</td>
            <td>{{ userAnswers[index] }}</td>
            <td>{{ question.correctAnswer }}</td>
            <td :class="{'correct': isCorrect(index), 'incorrect': !isCorrect(index)}">
              {{ isCorrect(index) ? '正确' : '错误' }}
            </td>
          </tr>
        </tbody>
      </table>
     
      <button @click="generateQuestions" class="try-again-btn">再试一次</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [], // 存储生成的题目
      userAnswers: [], // 存储用户输入的答案
      isSubmitted: false, // 是否提交答案
      correctCount: 0, // 正确答案数量
      startTime: null, // 答题开始时间
    };
  },
  computed: {
    accuracy() {
      return Math.round((this.correctCount / 10) * 100);
    },
    encouragement() {
      if (this.accuracy === 100) {
        return "太棒了！满分！继续保持！🎉";
      } else if (this.accuracy >= 80) {
        return "干得漂亮！你表现得很好！👍";
      } else if (this.accuracy >= 50) {
        return "还不错！继续努力，你会进步的！💪";
      } else {
        return "别担心，多练习你会更好的！😊";
      }
    },
  },
  methods: {
    generateQuestions() {
      this.questions = [];
      this.userAnswers = Array(10).fill("");
      for (let i = 0; i < 10; i++) {
        let num1, num2, operator;

        operator = Math.random() > 0.5 ? "+" : "-";

        if (operator === "+") {
          num1 = Math.floor(Math.random() * 100);
          num2 = Math.floor(Math.random() * (100 - num1));
        } else {
          num1 = Math.floor(Math.random() * 100);
          num2 = Math.floor(Math.random() * 100);
          if (num1 < num2) [num1, num2] = [num2, num1];
        }

        this.questions.push({
          text: `${num1} ${operator} ${num2}`,
          correctAnswer: operator === "+" ? num1 + num2 : num1 - num2,
        });
      }
      this.isSubmitted = false;
      this.correctCount = 0;
      this.startTime = new Date();
    },
    submitAnswers() {
      this.correctCount = this.questions.reduce((count, question, index) => {
        return count + (parseInt(this.userAnswers[index]) === question.correctAnswer ? 1 : 0);
      }, 0);

      this.isSubmitted = true;
    },
    isCorrect(index) {
      return parseInt(this.userAnswers[index]) === this.questions[index].correctAnswer;
    },
  },
  mounted() {
    this.generateQuestions();
  },
};
</script>

<style scoped>
h1, h2 {
  text-align: center;
}

.questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px 0;
}

.question {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.question span {
  margin-right: 10px;
}

.question-text {
  width: 100px;
}

input {
  padding: 5px;
  font-size: 14px;
  width: 120px;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.results-table th, .results-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.results-table th {
  background-color: #f4f4f4;
}

.correct {
  color: green;
  font-weight: bold;
}

.incorrect {
  color: red;
  font-weight: bold;
}

.submit-btn,
.try-again-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>
